<template>
	<view class="content" :key="dishKey">
		<view class="order-dish" v-if="type==='do' && dishInformation.shop?.categories">
			<view class="filter-nav">
				<view class="nav-item" :class="{active:dishActive===index}" @click="dishActive=index"
					v-for="(item,index) in dishInformation.shop?.categories" :key="item.id">
					{{item.name}}
				</view>
			</view>
			<view class="dish">
				<view class="hot">{{dishInformation.shop?.categories[dishActive].name}}</view>
				<view class="dish-list">
					<view class="dish-item"
						v-for="(item,index) in dishInformation.shop?.categories[dishActive].products" :key="item.id">

						<view class="">
							<image class="dish-picture" :src="item.picture"></image>
						</view>


						<view class="desc-operate">
							<text class="dish-name">{{item.name}}</text>
							<view class="heft-sales">
								<view class="weight">{{item.heft}}</view>
								<text class="sales">月售{{item.sales}}</text>
							</view>
							<view class="price-operate">
								<text class="before-discount">￥{{item.price}}</text>
								<text class="after-discount"></text>
							</view>
						</view>
						<view class="add-delete">
							<image class="delete" @click="changeMenu(item.id,'delete')"
								v-show="inOrder[index]?.dishCount>0" src="@/static/images/home/deleteProduction@2x.png">
							</image>
							<text v-show="inOrder[index]?.dishCount>0">{{inOrder[index]?.dishCount}}</text>
							<image class="add" @click="changeMenu(item.id,'add')"
								src="@/static/images/home/addProduction@2x.png"></image>
						</view>
					</view>
				</view>

			</view>

			<view class="cart">
				<view class="desc">
					<image class="cart-image" src="@/static/images/home/cart@2x.png" mode="">
						<view v-show="productionCount!==0" class="productionCount">
							{{productionCount}}
						</view>
					</image>
					<view class="price">
						<text class="sum-price">${{amountPrice}}</text>
						<text class="sent-price">预估配送费 12</text>
					</view>

				</view>
				<view class="go-sum" @click="toGetSum">
					去结算
				</view>
			</view>

		</view>
		<view v-else-if="type==='comment'" class="comment">
			<view class="score">
				<text class="conprehensive-score">{{commentInformation.shopAvgScore.toFixed(1)}}</text>
				<view class="stars-desc">
					<view class="stars">
						<image src="@/static/images/home/star@2x.png" mode=""></image>
						<image src="@/static/images/home/star@2x.png" mode=""></image>
						<image src="@/static/images/home/star@2x.png" mode=""></image>
						<image src="@/static/images/home/star@2x.png" mode=""></image>
					</view>
					<view class="desc">
						<text>商品质量</text>
						<text>共24人点评</text>
					</view>
				</view>
				<view class="sent">
					<text class="score">{{commentInformation.shopPsScore.toFixed(1)}}</text>
					<text>配送服务</text>
				</view>
			</view>
			<view class="comment-filter">
				<text class="filter-item active">
					全部
				</text>
				<text class="filter-item">
					好评
				</text><text class="filter-item">
					中评
				</text><text class="filter-item">
					差评
				</text><text class="filter-item">
					有图
				</text>
				<view class="check">
					<image class="check-image" :src="isCheck?check:checkBlank" mode=""></image>
					<text class="check-desc">只看有内容的评价</text>
				</view>
			</view>
			<view class="comment-list">
				<view class="comment-item" v-for="item in comments" :key="item.id">
					<view class="avatar">
						<image :src="item.commentUser.avatar"></image>
					</view>
					<view class="beside-avatar">
						<view class="item-user">
							<text class="user-name">{{item.commentUser.name}}</text>
							<text class="comment-create-date">{{dateTransform(item.commentInfo.createTime)}}</text>
						</view>
						<view class="item-star">
							<view class="star-item">
								<text>商品</text>
								<view class="score-list">
									<image class="star" v-for="(stars,index) in item.commentInfo.tasteScore"
										:key="index" src="@/static/images/home/star@2x.png"></image>
								</view>
							</view>
							<view class="star-item">
								<text>配送</text>
								<view class="score-list">
									<image class="star" v-for="(stars,index) in item.commentInfo.tasteScore"
										:key="index" src="@/static/images/home/star@2x.png" mode=""></image>
								</view>
							</view>
						</view>
						<text class="item-content">
							{{item.commentInfo.content}}
						</text>
						<view class="item-images">
							<image class="comment-image" v-for="(photo,index) in item.commentInfo.photos" :key="index">

							</image>
						</view>
						<view class="item-reply">
							店家回复:说得好!
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else-if="type==='store'" class="store">
			<view class="store-info">
				<view class="title">
					商家信息
				</view>
				<view class="info">
					<view class="info-item" v-for="(item,index) in storeInformationList" :key="index">
						<image class="info-iamge" :src="item.image"></image>
						<text class="desc">{{item.info}}</text>
					</view>
				</view>
			</view>

			<view class="store-notice">
				<view class="title">商家公告</view>
				<text class="notice-content">
					{{storeInformation.notice}}</text>
			</view>

		</view>
	</view>
</template>

<script setup>
	import checkBlank from "@/static/images/order/checkBlank@2x.png"
	import check from "@/static/images/order/check@2x.png"
	import salesCount from "@/static/images/home/salesCount@2x.png"
	import address from "@/static/images/home/address@2x.png"
	import phone from "@/static/images/home/phone@2x.png"
	import workingTime from "@/static/images/home/workingTime@2x.png"
	import sent from "@/static/images/home/sent@2x.png"
	import document from "@/static/images/home/document@2x.png"
	import request from "@/Api/request.js"
	import {
		watch,
		ref,
		reactive,
		toRefs
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import dateTransform from "@/utils/dateTransform.js"
	const props = defineProps({
		type: {
			type: String,
			require: true
		},
	})
	let shopId = ref();
	const {
		type
	} = toRefs(props);

	const dishActive = ref(0);
	const isCheck = ref(true);
	const storeInformationList = reactive([{
			image: salesCount,
			info: ""
		},
		{
			image: address,
			info: ""
		},
		{
			image: phone,
			info: ""
		},
		{
			image: workingTime,
			info: "09:00-21:30"
		},
		{
			image: sent,
			info: "由商家配送"
		},
		{
			image: document,
			info: ""
		},
	])

	//组件的及时刷新
	let dishKey = ref("dishKey0")

	//菜品
	let dishInformation = reactive({});
	//评价
	let commentInformation = reactive({});
	//店铺
	let storeInformation = reactive({});

	//评价信息的加工产物
	let comments = reactive([])

	// 购物车内的数量
	let productionCount = ref(0);
	// 购物车消费总价
	let amountPrice = ref(0)

	onLoad((options) => {
		shopId.value = options.id
		//获取店铺菜单列表信息
		request({
			url: `/shop/` + shopId.value,
			method: "GET"
		}).then((res) => {
			dishInformation = res;
			dishKey.value += "1";
		});
		//获取评论区
		request({
			url: `/comment/` + shopId.value,
			method: "GET"
		}).then((res) => {
			commentInformation = res;
			for (let comment of commentInformation.comments) {
				//获取用户信息并整理推入comments 作遍历用
				request({
					url: "/user/" + comment.userId,
					method: "GET",
				}).then((res) => {
					//修改图片的格式, 返回数据的图片用＠合成为string，此处分割为数组
					comment.photos = comment.photos.split("@")
					//剔除多余的最后一组
					comment.photos.push()
					comments.push({
						commentUser: res,
						commentInfo: comment
					})
				})
			}

		})

		//获取店铺信息
		request({
			url: `/shop/detail/` + shopId.value,
			method: "GET"
		}).then((res) => {
			storeInformation = res;
			storeInformationList[0].info = storeInformation.sales + "份"
			storeInformationList[1].info = storeInformation.address
			storeInformationList[2].info = storeInformation.phone
		})

		//获取购物车
		request({
			url: `/cart/${shopId.value}`,
			method: "GET",
		}).then((res) => {
			productionCount.value = res.amountNumber
			amountPrice.value = res.amountPrice
			for (let item of res.cartItems) {
				inOrder.push({
					dishId: item.productId,
					dishCount: item.number
				})
			}
			inOrder.sort((a, b) => {
				return a.dishId - b.dishId;
			})
		})
	})

	//用户点餐列表
	let inOrder = reactive([]);

	function changeMenu(id, type) {
		let exist = false;
		let dishNumber = 1;
		//遍历判断是否存在列表之中
		for (let item of inOrder) {
			if (item.dishId === id) {
				exist = true;
				if (type === "add") {
					productionCount.value++
					item.dishCount++;
					dishNumber = item.dishCount
				} else if (type === "delete" && item.dishCount > 0) {
					item.dishCount--;
					productionCount.value--
					dishNumber = item.dishCount
				} else {
					console.log("点菜意外的问题");
				}
			}
		}

		//当不存在列表中且为添加按钮时push
		if (type === "add" && !exist) {
			inOrder.push({
				dishId: id,
				dishCount: 1
			})
			productionCount.value++
		} else {
			//菜品新增
		}
		const updateCartVO = {
			number: dishNumber,
			productId: id,
			shopId: shopId.value
		}

		//与后端的信息交互 更新购物车
		request({
			url: "/cart",
			method: "POST",
			params: updateCartVO
		}).then((res) => {
			amountPrice.value = res.amountPrice
		})
	}

	function toGetSum() {
		uni.navigateTo({
			url: `/pages/Home/Store/ToGetSum/ToGetSum?shop=${shopId.value}`
		})
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/commen.scss";

	.content {
		height: 100%;
		overflow: scroll;
	}

	.order-dish {
		display: flex;


		.filter-nav {
			display: flex;
			flex-direction: column;

			.nav-item {
				width: 176rpx;
				height: 128rpx;
				transform: translateX(-32rpx);
				text-align: center;
				line-height: 128rpx;
				@include font-base(26rpx, #999999)
			}

			.active {
				@include font-base(26rpx, #FFB42D, 500)
			}
		}

		.dish {
			width: 100%;
			height: 700rpx;
			overflow: scroll;

			.hot {
				margin: 24rpx 0 16rpx;
				@include font-base(28rpx, #666666, 400)
			}

			.dish-list {
				display: flex;
				flex-direction: column;
				gap: 56rpx;
				width: 100%;

				.dish-item {
					display: flex;
					position: relative;

					.dish-picture {
						width: 192rpx;
						height: 192rpx;
					}

					.desc-operate {
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.dish-name {
							@include font-base(30rpx, #000000, 500);
						}

						.heft-sales {
							display: flex;
							align-items: center;
							gap: 8rpx;

							.weight {
								padding: 2rpx 8rpx;
								@include font-base(16rpx, #F16B13, 400);
								background: #FEFDE0;
								border-radius: 4rpx;
							}

							.sales {
								@include font-base(24rpx, #999999, 400)
							}
						}
					}

					.add-delete {
						position: absolute;
						right: 0;
						bottom: 8rpx;
						display: flex;
						gap: 16rpx;
						align-items: center;

						image {
							width: 48rpx;
							height: 48rpx;
						}
					}
				}
			}
		}

		.cart {
			position: absolute;
			bottom: 0;
			display: flex;
			height: 104rpx;
			width: 100%;
			margin-bottom: 68rpx;

			.desc {
				background: #333333;
				padding: 24rpx 32rpx;
				border-radius: 56rpx 0 0 56rpx;
				width: calc(100% - 208rpx - 72rpx);
				display: flex;
				align-items: center;
				gap: 16rpx;

				.cart-image {
					width: 56rpx;
					height: 56rpx;
					position: relative;
					overflow: visible;
				}

				.productionCount {
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					position: absolute;
					right: -10rpx;
					top: 0;
					background: #F21616;
					@include font-base(16rpx, #FFFFFF, 500);
					text-align: center;
					line-height: 20rpx;
				}

				.price {
					display: flex;
					flex-direction: column;
					justify-content: space-between
				}

				.sum-price {
					@include font-base(40rpx, #E6E6E6, 600);
				}

				.sent-price {
					@include font-base(20rpx, #999999, 400);
				}
			}

			.go-sum {
				width: 208rpx;
				background: linear-gradient(to right, #FFD93B, #FFB42D);
				border-radius: 0 56rpx 56rpx 0;
				text-align: center;
				line-height: 104rpx;
				@include font-base(32rpx, #333333, 600)
			}
		}
	}

	.comment {
		padding: 32rpx 0;
		display: flex;
		flex-direction: column;
		gap: 48rpx;
		position: relative;

		.score {
			display: flex;
			position: relative;

			.conprehensive-score {
				@include font-base(96rpx, #F16B13, 700);
				line-height: 96rpx;
			}

			.stars-desc {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				margin-left: 16rpx;

				.stars {
					display: flex;
					gap: 8rpx;

					image {
						width: 24rpx;
						height: 24rpx;
					}
				}

				.desc {
					@include font-base(20rpx, #999999, 400);
					display: flex;
					gap: 12rpx;
				}
			}

			.sent {
				position: absolute;
				margin-right: 56rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				right: 0;
				align-items: center;

				text {
					@include font-base(20rpx, #999999, 400);
				}

				.score {
					@include font-base(48rpx, #000000, 500);
				}
			}


		}

		.comment-filter {
			display: flex;
			gap: 16rpx;
			flex-wrap: wrap;

			.filter-item {
				padding: 12rpx 24rpx;
				border-radius: 32rpx;
				@include font-base(24rpx, #333333);
				background: #F5F5F5;
			}



			.active {
				image {

					background: #F16B13;
					color: #ffffff;
				}
			}

			.check {
				flex-basis: 100%;

				.check-image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 8rpx;
				}

				.check-desc {
					@include font-base(24rpx, #333333, 400);
					vertical-align: 3rpx;
				}
			}
		}

		.comment-list {
			display: flex;
			gap: 64rpx;
			flex-direction: column;

			.comment-item {
				position: relative;
				display: flex;
				gap: 16rpx;

				.avatar image {
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
				}

				.beside-avatar {
					display: flex;
					flex-direction: column;
					gap: 16rpx;

					.item-user {
						display: flex;
						flex-direction: column;

						.user-name {
							@include font-base(28rpx, #333333, 600);
						}

						.comment-create-date {
							@include font-base(20rpx, #999999, 400);
						}

					}

					.item-star {
						display: flex;

						.star-item {
							display: flex;
							align-items: center;
							gap: 10rpx;

							text {
								@include font-base(20rpx, #999999, 400);
							}

							.score-list {
								display: flex;
								gap: 4rpx;

								.star {
									width: 20rpx;
									height: 20rpx;
								}
							}

						}

					}

					.item-content {
						@include font-base(28rpx, #333333, 400);
						width: 600rpx;
					}

					.item-images {
						display: flex;
						gap: 16rpx;
						flex-wrap: wrap;

						.comment-image {
							width: 290rpx;
							height: 280rpx;
						}
					}

					.item-reply {
						margin-top: 16rpx;
						padding: 16rpx 32rpx;
						background: #F5F5F5;
						border-radius: 8rpx;
						@include font-base(20rpx, #999999, 400);
					}
				}
			}

			.comment-item::after {
				content: "";
				position: absolute;
				height: 2rpx;
				width: 100%;
				background: #E6E6E6;
				bottom: -32rpx;
				left: 0;

			}

			.comment-item::after:last-child {
				display: none;
			}
		}

	}

	.comment::after {
		content: "";
		width: calc(100% + 64rpx);
		left: -32rpx;
		top: 0;
		height: 100%;
		z-index: -999;
		position: absolute;
		background: #FFFFFF;
	}

	.store {
		display: flex;
		gap: 48rpx;
		padding: 32rpx 0;
		flex-direction: column;

		.store-info,
		.store-notice {
			@include font-base(28rpx, #333333, 500);

			.title {
				margin-bottom: 24rpx;
			}

		}

		.info {
			display: flex;
			flex-direction: column;
			gap: 32rpx;

			.info-item {
				display: flex;
				gap: 24rpx;
				align-items: center;

				.desc {
					@include font-base(24rpx, #333333, 400)
				}


				.info-iamge {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.notice-content {
			@include font-base(24rpx, #999999)
		}
	}
</style>